<template>
  <q-page class="page">
    <BackHeader :back-fun="submit" fixed footer="完成" @footer-click="submit"></BackHeader>

    <section class="q-pa-md">
      <div class="center q-mt-sm">
        <q-icon
          name="schedule"
          style="font-size: 50px"
          :style="time <= 10 ? { color: '#4CAF50FF' } : { color: '#FFD101' }"
        />
      </div>
      <div class="text-center q-mt-sm" style="font-weight: bold; font-size: 18px">额度评估中{{ time }}秒</div>
      <div class="text-center" style="color: #ccc; font-size: 12px">额度申请已进入审批，请耐心等待</div>

      <div class="q-mt-sm">
        <q-btn
          label="查看更多第三方产品"
          padding="none none"
          unelevated
          rounded
          @click="submit"
          class="full-width q-mt-lg"
          style="
            background-color: #096AFF;
            color: #fff;
            padding: 8px 18px !important;
            font-size: 15px;
            font-weight: 600;
          "
        />
      </div>
    </section>
  </q-page>
</template>

<script setup lang="ts">
import { useAppStore } from 'src/stores/app-store';
import BackHeader from 'src/components/BackHeader.vue';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { onUnmounted } from 'vue';

const router = useRouter();
const route = useRoute();

const time = ref(5);
let interval: number | undefined
const runTime = () => {
  clearInterval(interval)
  interval = window.setInterval(() => {
    time.value--
    if (time.value <= 0) {
      submit();
      clearInterval(interval)
    }
  }, 1000)
}
runTime()
onUnmounted(() => {
  clearInterval(interval)
})


const submit = () => {
  router.replace({path: '/prodList', query: route.query})
};
</script>

<style lang="scss" scoped>
.input-box {
  textarea {
    border: 1px solid #4461e2;
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    font-size: 16px;
  }
}
</style>
